<script>
import CustomDialog from '@/components/custom-dialog/index.vue'
import RealTimeDataViewing from './real-time-data-viewing.vue'

export default {
  name: 'comparison-dialog',
  components: { CustomDialog, RealTimeDataViewing },
  props: {
    title: {
      type: String,
      default: '数据对比'
    },
    filter: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      visible: false,
    }
  },
  computed: {
    names () {
      return this.filter.names
    },
    values () {
      return this.filter.values
    },
    count () {
      return this.filter.values ? this.filter.values.length : 0
    }
  },
  methods: {
    open () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.dialog.open()
      })
    },
    onClose () {
      this.visible = false
    },
    beforeConfirm () {
      return true
    },
  },
}
</script>

<template>
<custom-dialog
  class="comparison-dialog" :need-drag="false"
  ref="dialog" :fullscreen="true" :title="title"
  :show-confirm-button="false" :show-cancel-button="false"
  :on-close="onClose"
>
  <div v-if="visible" class="grid-content">
    <div class="grid-item" v-for="item in count" :key="item">
      <real-time-data-viewing
        :show-icon="false" :title="names[item - 1] + '--全年综合能耗累积图'"
        :show-secondary-title="false" height="330px"
      ></real-time-data-viewing>
    </div>
  </div>
</custom-dialog>
</template>

<style scoped>
.comparison-dialog ::v-deep .el-dialog {
  background: #011933 !important;
}
.comparison-dialog ::v-deep .el-dialog__title {
  color: #03c0ff;
}
.comparison-dialog ::v-deep .el-dialog__header {
  border-color: #03c0ff!important;
}
.comparison-dialog .grid-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 1rem;
  height: calc(100vh - 150px);
}
.comparison-dialog ::v-deep .primary-title {
  color: #fff !important;
}
</style>
